<template>
    <div class="main">
        <div class="manage">
            <div class="student_box">
                <div class="topNav">
                    <p class="title">学生管理</p>
                    <div class="flex" style="line-height: 12px;">
                        <div class="direction" @click="prevPage"><el-icon>
                                <ArrowLeft />
                            </el-icon></div>
                        <span class="spanBlod">1</span>
                        <span>/</span>
                        <span>{{ totalPages }}</span>
                        <div class="direction" @click="nextPage"><el-icon>
                                <ArrowRight />
                            </el-icon></div>
                    </div>
                </div>
                <div class="student_manage" :style="gridStyle">
                    <div class="student_card" v-for="item in paginatedData" @click="goIn(item)">
                        <img :src="item.icon" alt="">
                        <p class="studentApp">{{ item.appName }}</p>
                    </div>
                </div>
            </div>
            <div class="teacher_box">
                <div class="topNav">
                    <p class="title">教职工管理</p>
                    <div class="flex" style="line-height: 12px;">
                        <div class="direction" @click="prevPage1"><el-icon>
                                <ArrowLeft />
                            </el-icon></div>
                        <span class="spanBlod">{{ currentPage1 }}</span>
                        <span>/</span>
                        <span>{{ totalPages1 }}</span>
                        <div class="direction" @click="nextPage1"><el-icon>
                                <ArrowRight />
                            </el-icon></div>
                    </div>
                </div>
                <div class="teacher_manage" :style="gridStyle1">
                    <div class="teacher_card" v-for="item in paginatedData1" @click="goIn(item)">
                        <img :src="item.icon">
                        <div class="teacher_introduce">
                            <div class="introduce_top flex">
                                <p class="teacherApp">{{ item.appName }}</p>
                                <!-- <p class="pTab">免费试用</p> -->
                            </div>
                            <div class="introduce_bottom">
                                <p class="teacherTip">多项目 | 多视图 | 多人协作</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { httpService } from "@/utils/httpService";
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'

export default {
    components: { ArrowLeft, ArrowRight },
    props: {
        studentList: {
            type: Array,
            default: false
        },
        teacherList: {
            type: Array,
            default: false
        },
    },
    data() {
        return {
            list: [],
            currentPage: 1, // 当前页
            pageSize: 7,
            currentPage1: 1, // 当前页
            pageSize1: 4,

            visibleCount: 6, // 当前一行可显示的卡片数量
        }
    },
    computed: {
        // 总页数
        totalPages() {
            return Math.ceil(this.studentList.length / this.pageSize);
        },
        // 当前页显示的数据
        paginatedData() {
            const start = (this.currentPage - 1) * this.pageSize;
            return this.studentList.slice(start, start + this.pageSize);
        },
        // 总页数
        totalPages1() {
            return Math.ceil(this.teacherList.length / this.pageSize1);
        },
        // 当前页显示的数据
        paginatedData1() {
            const start = (this.currentPage1 - 1) * this.pageSize1;
            return this.teacherList.slice(start, start + this.pageSize1);
        },



        gridStyle() {
            return {
                gridTemplateColumns: `repeat(${this.pageSize}, 1fr)` // 动态设置列数
            };
        },
        gridStyle1() {
            return {
                gridTemplateColumns: `repeat(${this.pageSize1}, 1fr)` // 动态设置列数
            };
        },

    },

    mounted() {
        // this.getListApp()
        this.updateVisibleCount();
        this.updateVisibleCount1();
        window.addEventListener("resize", this.updateVisibleCount);
        window.addEventListener("resize", this.updateVisibleCount1);
    },
    beforeDestroy() {
        window.removeEventListener("resize", this.updateVisibleCount);
        window.removeEventListener("resize", this.updateVisibleCount1);
    },
    methods: {
        getListApp() {
            httpService("/javaApi/getAllApp", "", "get").then((data) => {
                console.log(data);
                this.list = data;
                this.appTotal = data.length;
            });
        },
        goIn(item) {
            if (item.background) {
                let routeData = this.$router.resolve({
                    path: item.background,
                });
                window.open(routeData.href, "_blank");
            } else {
                //这里post调用后端接口，后端接口负责跳转业务
                let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                params.append("returnUrl", item.url);
                httpService("/javaApi/doLogin", params, "post").then((data) => {
                    if (data.code == 200) {
                        window.open(data.object, "_blank");
                    } else {
                        ElMessage.error(data.message);
                    }
                });
            }
        },

        // 上一页
        prevPage() {
            if (this.currentPage > 1) {
                this.currentPage--;
            }
        },
        // 下一页
        nextPage() {
            if (this.currentPage < this.totalPages) {
                this.currentPage++;
            }
        },
        // 上一页
        prevPage1() {
            if (this.currentPage1 > 1) {
                this.currentPage1--;
            }
        },
        // 下一页
        nextPage1() {
            console.log(this.currentPage1);
            if (this.currentPage1 < this.totalPages1) {
                this.currentPage1++;
            }
        },

        // 动态计算可见卡片数量
        updateVisibleCount() {
            const containerWidth = window.innerWidth; // 获取当前页面宽度
            // console.log(1, containerWidth);
            if (containerWidth >= 1500) {
                this.pageSize = 7; // 宽度 >= 1200 时显示 6 个
            } else if (containerWidth >= 1300) {
                this.pageSize = 6; // 宽度 >= 992 时显示 5 个
            } else if (containerWidth >= 1100) {
                this.pageSize = 5; // 宽度 >= 992 时显示 5 个
            } else if (containerWidth >= 992) {
                this.pageSize = 4; // 宽度 >= 768 时显示 4 个
            } else if (containerWidth >= 768) {
                this.pageSize = 3; // 宽度 >= 576 时显示 3 个
            } else {
                this.pageSize = 2; // 宽度 < 576 时显示 2 个
            }
            // console.log(this.visibleCount);
        },
        // 动态计算可见卡片数量
        updateVisibleCount1() {
            const containerWidth = window.innerWidth; // 获取当前页面宽度
            // console.log(1, containerWidth);
            if (containerWidth >= 1535) {
                this.pageSize1 = 4; // 宽度 >= 1200 时显示 6 个
            } else if (containerWidth >= 1200) {
                this.pageSize1 = 3; // 宽度 >= 992 时显示 5 个
            } else if (containerWidth >= 800) {
                this.pageSize1 = 2; // 宽度 >= 768 时显示 4 个
            } else {
                this.pageSize1 = 1; // 宽度 < 576 时显示 2 个
            }
            // console.log(this.pageSize1);
        },



    },
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main {
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    padding-top: 25px;
}

.manage {
    width: 96%;
    margin: 0 auto;
}

.student_box {
    padding-bottom: 25px;
    border-bottom: 1px solid #EDEDED;
    margin-bottom: 30px;
}

.topNav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
}

.topNav .title {
    font-size: 16px;
    color: #000;
    font-weight: bold;
    margin-top: 3px;
}

.student_manage {
    /* display: flex;
    justify-content: space-between;
    flex-wrap: wrap; */

    display: grid;
    gap: 10px;
}

.student_card {
    /* width: 13%; */
    /* min-width: 110px; */
    background-color: #F5F8FF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 15px 0 20px;
    font-size: 13px;
    color: #666;
    cursor: pointer; 
}

.student_card:hover {
    background-color: #ebf1ff;
}

.student_card:hover img {
    transform: rotateY(180deg);
    transition: all 0.3s ease-in-out;
}

.student_card img {
    width: 32px;
    height: 32px;
    margin-bottom: 10px; 
    transition: all 0.3s ease-in-out;
}

.studentApp {
    color: #666;
    font-size: 13px;
}

.teacher_box {}

.teacher_box .topNav {
    margin: 25px 0;
}

.teacher_manage { 
    display: grid;
    gap: 10px;
}

.teacher_card {
    display: flex;
    min-width: 215px;
    padding: 15px 0 2vw 0;
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    background-color: #F5F7F9;
}

.teacher_card:hover {
    background-color: rgba(0, 128, 255, .1);
}

.teacher_card:hover img {
    transform: rotateY(180deg);
    transition: all 0.3s ease-in-out;
}

.teacher_card img {
    width: 32px;
    height: 32px;
    margin: 0 15px;
    transition: all 0.3s ease-in-out;
}

.teacher_introduce {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.teacherApp {
    color: #333333;
    font-size: 13px;
}

.teacherTip {
    color: #999999;
    font-size: 12px;
}

.introduce_top {
    width: 92%;
    margin-bottom: 5px;
}

.introduce_top .pTitle {
    color: #333333;
    font-size: 13px;
    font-weight: bold;
}

.introduce_top .pTab {
    border: 1px solid #CDD1D7;
    border-radius: 4px;
    padding: 1px 6px;
    background-color: #fff;
    font-size: 10px;
    color: #999;
    white-space: nowrap;
}

.introduce_bottom {
    font-size: 12px;
    width: 92%;
    color: #999;
}

.direction {
    cursor: pointer;
}

@media only screen and (min-width: 1024px) {}

@media only screen and (max-width: 1024px) {}
</style>